<template>
  <div class="padding">
      <a-card :bordered="false">
        <a-flex justify="space-between" class="margin-bottom">
          <a-space>
            <Create/>
          </a-space>
          <a-space>
            <span class="fitter-button"><project-outlined/> 项目 <down-outlined class="font-size-ssm"/></span>
            <span class="fitter-button"><flag-outlined/> 优先级 <down-outlined class="font-size-ssm"/></span>
            <span class="fitter-button"><clock-circle-outlined/> 状态 <down-outlined class="font-size-ssm"/></span>
            <a-input-search placeholder="输入关键搜索"></a-input-search>
            <span class="fitter-button"><SortAscendingOutlined /></span>
          </a-space>
        </a-flex>
        <a-table :columns="columns"
                 :data-source="dataSource"
                 row-key="id"
                 :pagination="tablePageConfig"
                 :row-selection="{
                   selectedRowKeys:state.selectedRowKeys,
                   hideSelectAll:true,
                   onChange:onChange}">
          <template #bodyCell="{record,column}">
            <template v-if="column.dataIndex==='title'">
              {{record.title}}
            </template>
            <template v-if="column.dataIndex==='status'">
              <a-dropdown>
                <template #overlay>
                  <a-menu>
                    <a-menu-item v-for="item in TaskStatus">
                      <a-tag :color="item.color">{{item.label}}</a-tag>
                    </a-menu-item>
                  </a-menu>
                </template>
                <a-tag color="red">{{record.status}}</a-tag>
              </a-dropdown>
            </template>
            <template v-if="column.dataIndex==='level'">
              <a-tag color="blue">{{record.level}}</a-tag>
            </template>
            <template v-if="column.dataIndex==='member'">
              <a-avatar :size="22"/> {{record.member}}
            </template>
          </template>
        </a-table>
      </a-card>
  </div>
  <Detail/>
</template>
<script lang="ts" setup>
import {
  FlagOutlined,
  SortAscendingOutlined,
  ClockCircleOutlined,
  ProjectOutlined,
  DownOutlined
} from "@ant-design/icons-vue";
import Create from "./components/Create.vue";
import Detail from "./components/Detail.vue";
import {reactive} from "vue";
import {tablePageConfig} from "@/config";

const columns = [
  {key:'title',title: '标题', dataIndex: 'title'},
  {key:'status',title: '任务状态', dataIndex: 'status',width: 100},
  {key:'level',title: '优先级', dataIndex: 'level',width: 100},
  {key:'member',title: '执行者', dataIndex: 'member',width: 120},
  {key:'date_at',title: '截止日期', dataIndex: 'date_at',width: 200},
]

const dataSource = reactive<TaskItem[]>([])
const state = reactive({
  selectedRowKeys:<RowKeysType[]>[],
  total:<number>0
})
//生成datasource随机数据
for (let i = 0; i < 40; i++) {
  dataSource.push({
    id: i,
    title: '任务标题',
    level: '优先级',
    member: '执行者',
    status: i%3,
    date_at: '2024-12-25',
  })
}

//添加组选框，自动完成任务功能，并从列表中移除
const onChange = (rowKeys:RowKeysType)=>{
  state.selectedRowKeys = rowKeys
  setTimeout(()=>{
    rowKeys.forEach(id=>{
      dataSource.splice(dataSource.findIndex(item=>item.id===id),1)
    })
  },200)
  state.total = dataSource.length
}

</script>
<style scoped>
  .fitter-button {
    cursor: pointer;
    font-size: 14px;
    height: 32px;
    padding: 4px 12px;
    border-radius: 6px;
    display: inline-block;
    background-color: #fafafa;
  }
  .fitter-button:hover {
    background-color: #f5f5f5;
  }
</style>